<template>
  <div class="Goods" :style="styles">
    <div class="Goods-pic">
      <img :src="goods.goods2title_title" alt="" @click="handleItemClick">
      <div v-if="isMuchMange" :class="{
            'isMuchMange': true,
            'Selected': goods.selected
            }" @click="handleItemClick" />
    </div>
    <div class="Goods-des">
      <div class="des-oringe">¥ {{goods.goods_price}}</div>
      <div class="des-grey">
        <el-tooltip content="已付款" placement="bottom">
          <div><i class="iconfont icon-Cash-Payment" />{{goods.saleNum}}</div>
        </el-tooltip>
        <el-tooltip content="评价" placement="bottom">
          <div><i class="iconfont icon-star" />{{goods.evaluation}}</div>
        </el-tooltip>
        <el-tooltip content="收藏数" placement="bottom">
          <div><i class="iconfont icon-love" ref="collect" />{{goods.collectNum}}</div>
        </el-tooltip>
      </div>
    </div>
    <div class="Goods-name">
      {{goods.goods_name}}
    </div>
    <div class="Goods-author" v-if="!shopShow">
      <div class="author" @click="handleNameClick">{{goods.shop_name}}</div>
      <div><i class="iconfont icon-service" /></div>
    </div>
    <span :class="{'warn':goods.goods_status === 0, 'success': goods.goods_status === 1, 'error': goods.goods_status === 2 }" v-if="shopShow">
      {{status[goods.goods_status]}}...
    </span>
  </div>
</template>

<script>

export default {
  name: 'ShowContain',
  props: {
    //是否属于我的店铺里的商品
    shopShow: {
      type: Boolean,
      default: false
    },
    styles: {
      type: Object,
      default: () => {
        return {
          width: '12vw',
          height: '29vh',
          margin: '0 0.6375rem 0.6375rem 0.6375rem',
        }
      }
    },
    goods: {
      type: Object,
      default: () => { }
    },
    //默认行为跳到detail
    itemClick: {
      type: [Function, Boolean],
    },
    //默认行为跳到shop
    nameClick: {
      type: [Function, Boolean],
    },
    isMuchMange: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      status: ['待上架', '上架中', '已下架'],
    };
  },
  methods: {
    handleItemClick () {
      if (this.itemClick) {
        this.itemClick(this.goods);
      } else {
        this.$router.push({ name: 'Detail', query: { goods_id: this.goods.goods_id }, params: { type: this.goods.type_name }})
      }
    },
    handleNameClick () {
      if (this.nameClick) {
        this.nameClick(this.goods.shop_id);
      } else {
        this.$router.push({ name: 'Shop', query: { shop_id: this.goods.shop_id } });
      }
    },
  },
}
</script>
<style lang='scss' scoped src="./index.scss" />
